<template>
  <div class="regeisterPage">
    <div class="loginWrap" v-if="regeister">
      <img src="../../../static/images/loginWrap.png" alt="">
      <div class="outSide">
        <div class="outsideBox">
          <p class="p1">手机号验证</p>
          <div class="loginArea">
              <div class="loginInput">
                <input type="text"
                       placeholder="输入手机号"
                       id="telPhoneCheck"
                       @focus="hideTips"
                       @blur="checkTel"
                       ref="telPhoneCheck">
                <p class="errorTips animated shake" v-if="telError"  ref="errorTips" id="errorTips">手机格式错误</p>
              </div>
              <div class="logincode">
                <input type="text" placeholder="输入图形验证码" v-model="picCode">
                  <!--<div class="codeArea" ref="codeArea" @click.stop="changeCode">-->
                    <!--<img src="" alt="">-->
                  <!--</div>-->
                <img :src=src alt="" class="codeArea" ref="codeArea" @click.stop="changeCode">
              </div>
              <div class="logincode">
                <input type="text" placeholder="输入短信验证码" v-model="msgCode">
                <input type="button" @click.stop="getCode" class="getCode" :disabled="disabled" v-model="resendValue">
              </div>

              <div class="loginBtn">
                <input type="button" value="下一步" id="nextStep" @click.stop="nextStep">
              </div>
          </div>
        </div>
        <div class="center">
        </div>
      </div>
    </div>
    <div class="loginWrap" v-if="!regeister">
      <img src="../../../static/images/loginWrap.png" alt="">
      <div class="outSide outSide2">
        <div class="outsideBox">
          <p class="p1">个人信息录入</p>
          <div class="loginArea">
              <div class="loginInput">
                <input type="text"
                       placeholder="输入用户名"
                       v-model="userName"
                       ref="namePhoneCheck">
                <p class="errorTips animated shake" v-if="telError">手机格式错误</p>
              </div>
              <div class="loginInput">
                <input type="password" placeholder="输入密码" @keyup="showEyes1" ref="fillphone1" id="fillphone1" >
                <span class="eyes" v-if="showeyes1" @click.stop="togglePassword1" ></span>
              </div>
              <div class="loginInput">
                <input type="password" placeholder="请再次确认密码" @keyup="showEyes2" ref="fillphone2" id="fillphone2" >
                <span class="eyes" v-if="showeyes2" @click.stop="togglePassword2"></span>
              </div>
            <div class="heartSelect">
              <select name="cate_id" id="select0" value="" ref="select0" @change.stop="changeSelect">
                <option value="请选择公司">请选择公司</option>
                <option :value=item.id v-for="(item,index) in options" >{{item.company_name}}</option>
              </select>
            </div>
              <div class="heartSelect">
                <select name="cate_id" id="select1" value="" ref="select1">
                  <option value="请选择组织">请选择组织</option>
                  <option :value=item.id v-for="(item,index) in branchName">{{item.branchs_name}}</option>
                </select>
              </div>
              <div class="heartSelect">
                <select name="cate_id" id="select2" ref="select2">
                  <option value="请选择政治面貌">请选择政治面貌</option>
                  <option value="1">党员 </option>
                  <option value="2">群众 </option>
                </select>
              </div>
              <div class="loginBtn">
                <input type="button" value="确定"  @click.stop="confirmBtn">
              </div>
          </div>
        </div>
        <div class="center">
        </div>
      </div>
    </div>
    <div class="js_dialog" id="androidDialog1" v-if="showSuccess">
      <div class="weui-mask"></div>
      <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__bd">
            注册成功，将跳转至登录页面
        </div>
        <div class="weui-dialog__ft">
          <a class="weui-dialog__btn  weui-dialog__btn_primary weui_confim" @click.stop="navToLogin">确认</a>
        </div>
      </div>
    </div>
    <Alarm :alarm="alarm" v-if="showAlarm" @cancel="cancel" @confirm="confirm"></Alarm>
  </div>

</template>
<script>
  import Alarm from '../../components/alarm.vue'
  import{mapState} from 'vuex'
export default({
  data(){
      return {
        regeister:true,
        telError:false,
        disabled:false,
        timer:null,
        resendValue:'获取验证码',
        count:119,
        picCode:'',
        msgCode:'',
        showeyes1:false,
        showeyes2:false,
        alarm:'',
        showAlarm:false,
        messageData:'',
        codeUrl:'',
        randomArray:'',
        options:[],
        branchName:[],
        src:'',
        userTel:'',
        showSuccess:false,
        userName:''
      }
  },
  computed:{
    ...mapState({
//      company_id:state=>state.app.company_id
    })
  },
  components:{
    Alarm:Alarm
  },
  methods:{
    changeSelect(){
      this.axios.post('/home/Login/getBranchs?'+`${this.baseUrl}`,{
        company_id:this.$refs.select0.value
      })
        .then((res)=>{
          if(res.data.code==1){
            console.log(res.data.data)
            this.branchName =res.data.data
          }else{
            this.branchName =[]
          }
        })
    },
    changeCode(){
      this.initCode()
    },
    cancel(){
      this.showAlarm =false
    },
    confirm(){
      this.showAlarm =false
    },
    navToLogin(){
        this.$router.push('/loginPage')
    },
    confirmBtn(){
        if(!this.userName){
          this.alarm='请输入你的用户名'
          this.showAlarm =true
          return false
        }
        if(!this.$refs.fillphone1.value||this.$refs.fillphone1.value.length<6){
          this.alarm='请输入你的密码'
          this.showAlarm =true
          return false
        }
        if(!this.$refs.fillphone2.value||this.$refs.fillphone2.value.length<6){
          this.alarm='请再次输入你的密码'
          this.showAlarm =true
          return false
        }
        if(this.$refs.fillphone2.value !=this.$refs.fillphone1.value){
            this.alarm='两次输入的密码不一致'
            this.showAlarm =true
            return false
        }
      if(this.$refs.select0.value=='请选择组织'){
        this.alarm='请选择组织'
        this.showAlarm =true
        return false
      }
        if(this.$refs.select1.value=='请选择组织'){
          this.alarm='请选择组织'
          this.showAlarm =true
          return false
        }

      if(this.$refs.select2.value=='请选择政治面貌'){
        this.alarm='请选择政治面貌'
        this.showAlarm =true
        return false
      }
      this.axios.post('/home/Login/entry?'+`${this.baseUrl}`,{
          username:this.userName,
          password:this.$refs.fillphone1.value,
          password1:this.$refs.fillphone2.value,
          branchs_id: this.$refs.select1.value,
          company_id:this.$refs.select0.value,
          party_status:this.$refs.select2.value,
          tel:this.userTel
        }).then((res)=>{
            if(res.data.code==1){
              this.showSuccess =true
            }else{
              this.alarm =res.data
              this.showAlarm =true
            }
        }).catch((res)=>{
          this.alarm =res
         this.showAlarm =true
      })
    },
//    checkPassword(){
//        if(this.$refs.fillphone1.value &&this.$refs.fillphone2.value){
//            if(this.$refs.fillphone1.value !=this.$refs.fillphone2.value){
//                console.log(this.$refs.fillphone1.value)
//              console.log(this.$refs.fillphone2.value)
//              this.alarm='两次输入的密码不一致'
//              this.showAlarm =true
//            }
//        }
//    },
    nextStep(){
      if(this.checkTel() &&this.picCode&&this.msgCode){
          this.userTel =this.$refs.telPhoneCheck.value
            this.axios.post( '/home/login/register?'+`${this.baseUrl}`,{
              tel:this.$refs.telPhoneCheck.value,
              code:this.msgCode,
              captcha:this.picCode,
              id:this.randomArray
            })
            .then((res)=>{
              if(res.data.code==1){
                this.regeister=false

              }else{
                this.alarm=res.data.msg
                this.showAlarm =true
                this.initCode()
              }
            })
      }else{
          this.alarm='请核实相关信息'
          this.showAlarm =true
          this.initCode()
      }
    },
    showEyes1(e){
      if(e.keyCode===8){
      }else{
        this.showeyes1 =true
      }
    },
    togglePassword1(){
      if(this.$refs.fillphone1.type==='password'){
        this.$refs.fillphone1.type='text'
      }else if (this.$refs.fillphone1.type==='text'){
        this.$refs.fillphone1.type='password'
      }
    },
    showEyes2(e){
      if(e.keyCode===8){
      }else{
        this.showeyes2 =true
      }
    },
    togglePassword2(){
      if(this.$refs.fillphone2.type==='password'){
        this.$refs.fillphone2.type='text'
      }else if (this.$refs.fillphone2.type==='text'){
        this.$refs.fillphone2.type='password'
      }
    },
    checkTel(){
      var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
      if( !reg2.test(this.$refs.telPhoneCheck.value) ){
        this.telError =true
        return false;
      }
      return true
    },
    hideTips(){
      this.telError =false
    },
    getCode(){
        if(this.checkTel()){
          let that =this
          this.disabled=true
          this.resendValue='119s后重发'
          this.startCount()
          this.axios.get('/home/Login/sendMsg/category/1',{
            params:{
            tel:that.$refs.telPhoneCheck.value
          }
          }).then((res)=>{
              if(res.data.code==1){
                  this.messageData =res.data.data.randStr
              }else{
                this.alarm=res.data.msg
                this.showAlarm =true
                this.initCode()
              }
          })
            .catch((res)=>{
              this.alarm=res.data.msg
              this.showAlarm =true
              this.initCode()
            })
        }else{
          this.telError =true
        }
    },
    startCount(){
      let that =this
      this.timer =setInterval((res=>{
        that.count --
        that.resendValue =that.count+'s后重发'
        if(that.count===0){
          that.resendValue='获取验证码'
          clearInterval(that.timer)
          that.disabled =false
          that.count =119
        }
      }),1000)
    },
    getRandom(){
      this.randomArray =''
      var array =['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
      for(var i=0;i<4;i++){
          this.randomArray+= array[parseInt(Math.random()*array.length)]
        }
        return (this.randomArray)
    },

    initCode(){
        let that =this
      this.axios.get('/home/Login/create?'+`${this.baseUrl}`,{
          params:{
              id:that.getRandom()
          }
      }).then((res)=>{
        this.src=res.request.responseURL
      })
    }
  },
  mounted(){
      console.log(this.company_id)
//     console.log(this.$route.query.regeister)
    this.initCode()

    this.axios.get('/home/Login/tissue?'+`${this.baseUrl}`)
      .then((res)=>{
//      console.log(res.data.data)
      this.options =res.data.data
    });

  },
  created(){

  }
})
</script>
<style scoped>
  .loginWrap{
    background: #fcfcfd;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .outSide {
    text-align: center;
    font-size: .34rem;
    color: #333;
    position: absolute;
    left: 0rem;
    top: 1.2rem;
    width: 6.5rem;
    margin: 0 0.5rem;
    background: white;
    height: 8.14rem;
    background: transparent;
  }
  .outSide2{
    height: 9rem;
  }
  .outsideBox {
    position: absolute;
    left: 0rem;
    top: 0;
    width: 6.50rem;
    height: 8rem;
    background: white;
    border-radius: .16rem;
    box-shadow: 0 5px 5px #fce2e3;
    z-index: 3;
  }
  .outSide2 .outsideBox{
      height: 8.7rem
  }
  .outsideBox p {
    text-align: justify;
    padding: 0 0rem;
    color: #61a2ff;
    font-size: 0.22rem;
  }
  .forgetPassword{
    color: #61a2ff;
    font-size: 0.22rem;
  }
  .outsideBox .p1 {
    text-align: center;
    padding-top: 0.6rem;
    font-weight: bold;
    padding-bottom: .20rem;
    color: #333;
    font-size: .34rem;
    letter-spacing: 0.05rem;
  }

  .outsideBox .p2 {
    padding-bottom: .50rem;
  }

  .center {
    position: absolute;
    top: 0;
    left: .25rem;
    width: 6rem;
    bottom: 0rem;
    height: 8.30rem;
    background: white;
    border-radius: .12rem;
    box-shadow: 0 5px 5px #fce2e3;
    z-index: 2;
  }
  .outSide2 .center{
    height: 8.9rem;
  }
  .loginArea{
    width: 5.2rem;
    margin: 0 auto;
  }
  .loginInput input{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height:0.8rem;
    border-radius:0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    border: 0.02rem solid #f4f4f5;
  }
  .passwordArea{
    margin-top:0.58rem;
    margin-bottom: 0.3rem;
    overflow: hidden;
  }
  .weui-cell{
    padding: 0;
  }
  .passwordArea .weui-check__label{
    float: left;
    height: 0.58rem;
  }
  .passwordArea .forgetPassword{
    float: right;
    height: 0.58rem;
    line-height: 0.58rem;

  }
  .loginInput{
    margin-top: 0.4rem;
    position: relative;
  }
  .outSide2 .loginInput{
    margin-top: 0.22rem;
  }
  .logincode{
    margin-top: 0.4rem;
    overflow: hidden;
  }
  .loginInput input{
    background: #fafafa;
  }
  .logincode input{
    width: 3.4rem;
    background: #fafafa;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height: 0.8rem;
    border-radius: 0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    border: 0.02rem solid #f4f4f5;
    float: left;
  }
  .logincode .codeArea{
    float: right;
    width: 1.6rem;
    height: 0.8rem;
    background: #dcdcdc;
    font-size: 0.22rem;
    line-height: 0.8rem;
    background-image: url("../../../static/images/codeCover.jpg");
    background-repeat: no-repeat;
    background-size: 1.6rem 0.8rem;
  }
  .logincode .codeArea  div img{
    display: block;
    width: 1.6rem;
    height: 0.8rem;
  }
  .logincode .getCode{
    float: right;
    width: 1.6rem;
    height: 0.8rem;
    background: linear-gradient(to right, #f84342 0%, #e83126 100%);
    font-size: 0.22rem;
    line-height: 0.8rem;
    color: white;
    border-radius: 0.13rem;
    border:none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    padding-left: 0;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;
    font-size: 0.3rem;
  }
  .loginInput .errorTips{
    position: absolute;
    right: 0.6rem;
    top:0;
    height: 100%;
    padding-right: 0.6rem;
    background-image: url("../../../static/images/errorTips.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.3rem 0.3rem;
    font-size:0.24rem;
    color: #e83328;
    line-height: 0.8rem;
  }
  .loginInput .eyes{
    position: absolute;
    right: 0.3rem;
    top:0;
    height: 100%;
    width: 0.68rem;
    background-image: url("../../../static/images/eyes2.png");
    background-size: 0.38rem 0.24rem;
    background-repeat: no-repeat;
    background-position:right center;
    /*display: none;*/
  }
  .loginBtn{
    width: 100%;
    height: 0.7rem;
    margin-top: 0.2rem;
  }
  .loginBtn input{
    width: 100%;
    text-align: center;
    line-height: 0.7rem;
    font-size:0.34rem;
    color: #ffffff;
    border: none;
    outline: none;
    background: linear-gradient(to right, #f84342 0%, #e83126 100%);
    border-radius: 0.12rem;
  }

  .loginTips {
    text-align: center;
    font-size: 0.24rem;
    color: white;
    margin-top: 0.2rem;
  }

  @-webkit-keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .weui-check:checked + .weui-icon-checked:before {
    content: '\EA06';
    color: #61a2ff;
  }
  .weui-icon-checked:before {
    content: '\EA01';
    color: #C9C9C9;
    font-size: 23px;
    display: block;
  }
  .weui-icon-checked:before {
    content: '\EA01';
    color: #C9C9C9;
    font-size: 23px;
    display: block;
  }
  .loginText{
    margin-top: 0.2rem;
    text-align: center;
    font-size: 0.22rem;
    color: #61a2ff;
  }
  .heartSelect,.heartInput{
    /*border: 1px solid #e6e6e6;*/
    border-radius: 0.13rem;
    position: relative;
    margin-bottom: 0.2rem;
    margin-top: 0.22rem;

  }
  .heartInput{
    padding-right: 0;
  }
  .heartInput input{
    display: inline-block;
    width: 100%;
    height:0.66rem;
    -webkit-appearance: none;
    border: none;
    outline: none;
  }
  .heartSelect:after{
    content: " ";
    display: inline-block;
    border-width: 6px 6px 0 6px;
    border-color:#f84342  transparent transparent transparent ;
    border-style: solid;
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0.3rem;
    margin-top: -4px;
    z-index: 3;
  }
   .heartSelect select{
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background-color: #fafafa;
    width: 100%;
     padding-left: 0.3rem;
    font-size: inherit;
    height: 100%;
    line-height: 0.7rem;
    position: relative;
    z-index: 1;
    text-align: right;
     color:#999;
     font-size: 0.3rem;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     border: 0.02rem solid #f4f4f5;
     border-radius: 0.13rem;
     height: 0.8rem;
     line-height: 0.8rem;
     padding-right: 0.4rem;
  }
</style>
